<template>
  <div class="container">
    <div class="topbar"></div>

    <!-- sqimg.qq.com/qq_product_operations/im/2015/bg1_1600.jpg
    sqimg.qq.com/qq_product_operations/im/2015/update/avds.jpg
    sqimg.qq.com/qq_product_operations/im/2015/bg3_1600.jpg -->

    <!-- http://sqimg.qq.com/qq_product_operations/im/2015/bg1_1600.jpg -->

    <section class="img"></section>
    <!-- <p>content1</p> -->
    <img src="https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/qq0.png" />
    <section class="img"></section>
    <!-- <p>content2</p> -->
    <img src="https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/qq1.png" />

    <section class="img"></section>
    <!-- <p>content3</p> -->
    <img src="https://itjchome.oss-cn-shenzhen.aliyuncs.com/offweb/qq2.png" />
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: auto;
  background: white;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  //   background: white;
  color: #fff;
  font-size: 20vh;
}
img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: white;

  object-fit: cover;
}
.img {
  overflow: hidden;
  width: 100%;
  /* 背景滚动  scroll 背景滚动    fixed  背景固定
 */
  background-attachment: fixed;
  /* 背景位置  用于设置背景图片的水平、垂直定位 */
  background-position: center;
  /* 背景尺寸   cover  contain   */
  background-size: cover;
  /* space   repeat-y  repeat  no-repeat   */
  background-repeat: no-repeat;
  cursor: default;

  user-select: none;
}

/* nth-of-type */

/* .img:nth-of-type(2)  */
/* 要满足两个条件 */
/* 1. 其父元素内 具有 相同标签名 兄弟元素的 第二个元素  注意标签名要一样 */
/* 2. 要有.img这个类 */

.img:nth-of-type(1) {
  background-image: url("http://sqimg.qq.com/qq_product_operations/im/2015/bg1_1600.jpg");
}
.img:nth-of-type(2) {
  background-image: url("http://sqimg.qq.com/qq_product_operations/im/2015/update/avds.jpg");
}
.img:nth-of-type(3) {
  background-image: url("http://sqimg.qq.com/qq_product_operations/im/2015/bg3_1600.jpg");
}

.topbar {
  width: 100vw;
  height: 80px;
  //   background: linear-gradient(to right bottom, red, green);
  //   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  background-image: linear-gradient(to right, #1278f6, #00b4aa);
}
</style>
